<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./images/bilibili-logo.ico">
  <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>

  <link rel="stylesheet" href="./css/bilibili.css">
</head>

<body>

  <div class="main">

    <div>
      <!-- 最上方的搜索栏 -->
      <div class="search-box">
        <img src="./images/b01.svg" alt="">

        <div class="search">
          <img src="./images/b02.svg" alt="">
          <input type="text" placeholder="请输入搜索关键词">
        </div>

        <img src="./images/b03.svg" alt="">
      </div>

      <!-- 上方的菜单栏 -->
      <div class="menu-box">

        <div>直播</div>
        <div class="active">推荐</div>
        <div>热门</div>
        <div>动画</div>
        <div>影视</div>
        <div>新征程</div>
        <div>
          <img src="./images/b04.svg" alt="">
        </div>

      </div>


    </div>


    <div>

      <!-- 大图模式的样式 -->
      <div class="img-box">
        <img src="./images/batman01.jpg" alt="">
        <div>蝙蝠侠黑暗骑士是漫改电影最高分</div>
      </div>

      <!-- 左右布局双图片的样式 -->
      <div class="img-box2">

        <!-- 左边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>

        <!-- 右边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>


      </div>

      <!-- 左右布局双图片的样式 -->
      <div class="img-box2">

        <!-- 左边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>

        <!-- 右边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>


      </div>

      <!-- 大图模式的样式 -->
      <div class="img-box">
        <img src="./images/batman01.jpg" alt="">
        <div>蝙蝠侠黑暗骑士是漫改电影最高分</div>
      </div>

      <!-- 左右布局双图片的样式 -->
      <div class="img-box2">

        <!-- 左边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>

        <!-- 右边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>


      </div>

      <!-- 左右布局双图片的样式 -->
      <div class="img-box2">

        <!-- 左边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>

        <!-- 右边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>


      </div>

      <!-- 左右布局双图片的样式 -->
      <div class="img-box2">

        <!-- 左边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>

        <!-- 右边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>


      </div>

      <!-- 左右布局双图片的样式 -->
      <div class="img-box2">

        <!-- 左边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>

        <!-- 右边 -->
        <div>
          <!-- 图片 -->
          <div class="img-box3">
            <img src="./images/batman02.jpg" alt="">
            <div>
              视频信息
            </div>
          </div>

          <!-- 文字描述 -->
          <div class="text1">
            最便宜的4070笔记本，开始取代4060，首发9200价格
          </div>

          <!-- 视频信息 -->
          <div class="intro">

            <div>
              <span class="info1">竖屏</span>
              <span>黑暗骑士的图片</span>
            </div>

            <div>
              <img src="./images/b09.svg" alt="">
            </div>

          </div>


        </div>


      </div>


    </div>



    <div class="bottom-box">

      <!-- 下方的菜单导航 -->
      <div>
        <img src="./images/b05.svg" alt="">
        <div class="active">首页</div>
      </div>

      <div>
        <img src="./images/b06.svg" alt="">
        <div>关注</div>
      </div>

      <div class="add">＋</div>

      <div>
        <img src="./images/b07.svg" alt="">
        <div>会员购</div>
      </div>

      <div>
        <img src="./images/b08.svg" alt="">
        <div>我的</div>
      </div>




    </div>

  </div>



</body>

</html>